<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <meta charset="UTF-8" />
    <title> 商家注册登录通道 </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
    <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
    <meta name="author" content="Codrops" />
    <link rel="stylesheet" href="/css/login/demo.css" />
    <link rel="stylesheet" href="/css/login/style.css" />
    <link rel="stylesheet" href="/css/login/animate-custom.css" />
</head>
<body>
<div class="container">
    <header>
        <h1> 畅悦 <span> 商家通道 </span></h1>
    </header>
    <section>
        <div id="container_demo" >
            <a class="hiddenanchor" id="toregister"></a>
            <a class="hiddenanchor" id="tologin"></a>
            <div id="wrapper">
                <div id="login" class="animate form">
                    <form autocomplete="on" action="/merchant/dologin">
                        <h1> 登 录 </h1>
                        <p>
                            <label for="username" class="uname" data-icon="u" > 用户名 </label>
                            <input id="username" name="account" required="required" type="text" placeholder="mysuperusername"/>
                        </p>
                        <p>
                            <label for="password" class="youpasswd" data-icon="p"> 密码 </label>
                            <input id="password" name="password" required="required" type="password" placeholder="mysuperpassword" />
                        </p>
                        <label for="password" class="dluyzm" data-icon="y"> 验证码 </label>
                        <input id="yqdlyzm" name="yqdlyzms" required="required" type="yzm" placeholder="mysuperVerification Code">
                        <br/>
                        <p align="right">
                            <br/>
                            <textarea readonly style="resize:none" id="yzm" ></textarea>
                            <a onClick="HQdlyzm()">获取验证码</a>
                        </p>
                        <p class="keeplogin">
                            <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                            <label for="loginkeeping"> 记住密码 </label>
                        </p>
                        <p class="login button">
                            <input type="submit" value="登  录" onClick="dlyyzm()" />
                        </p>
                        <p class="change_link">
                            还没有账号 ? →
                            <a href="#toregister" class="to_register"> 去注册 </a>
                        </p>
                    </form>
                </div>

                <div id="register" class="animate form">
                    <form autocomplete="on" action="/merchant/doregist" method="post" enctype="multipart/form-data" name="frm">
                        <h1> 注 册 </h1>
                        <p>
                            <label for="usernamesignup" class="uname" data-icon="m"> 用户名 </label>
                            <input id="usernamesignup" name="account" required="required" type="text"
                                   placeholder="mysuperusername" />
                        </p>
                        <p>
                            <label for="usernamesignup" class="uname" data-icon="m"> 企业名称 </label>
                            <input id="merchantnamesignup" name="merchantname" required="required" type="text" placeholder="mymegacorporation" />
                        </p>
                        <p>
                            <label for="phonesignup" class="phone" data-icon="p"> 手机号码 </label>
                            <input id="phonesignup" name="phone" required="required" type="text" placeholder="mysuperuserphone" />
                        </p>
                        <p>
                            <label for="emailsignup" class="youmail" data-icon="e" > 邮 箱 </label>
                            <input id="emailsignup" name="eamil" required="required" type="email" placeholder="mysupermail@mail.com"/>
                        </p>
                        <input id="createDatesignup"  type="text" style="display:none" />
                        <input id="statussignup" name="status" type="text" style="display:none" />
                        <p>
                        <p>证件照: <input type="file" id="tupian" name="imgUrl"/></p>
                        </p>
                        <p>
                            <label for="passwordsignup" class="youpasswd" data-icon="p"> 密码 </label>
                            <input id="passwordsignup" name="password" required="required" type="password"
                                   placeholder="mysuperpassword"/>
                        </p>
                        <!--<p>
                            <label for="passwordsignup" name="imgUrl" class="youpasswd" data-icon="p" enctype="multipart/form-data"> 企业的证件照 </label>
                            <input type="file" name="file" />
                        </p>-->
                        <p>
                            <label for="passwordsignup_confirm" class="youpasswd" data-icon="p"> 确认密码 </label>
                            <input id="passwordsignup_confirm" name="password2" required="required" type="password"
                                   placeholder="mysuperpassword" />
                        </p>
                        <p>
                            <label for="phonesignup" class="phone" data-icon="y"> 验证码 </label>
                            <input width="18" hidden="hidden"  id="yamlo">
                        <p align="right">
                            <!--<textarea readonly style="resize:none" id="yzm" ></textarea>-->
                            <input name="yzmla" id="yzmla" placeholder="mysuperVerificationCode">
                            <!--<a onClick="yzhanma()"> 获取验证码 </a>-->
                            <button id="yzmanniu">获取验证码</button>
                        </p>
                        <!--<label>FEW</label>-->
                        </p>
                        <p class="signin button">
                            <input type="submit" value="注  册"  onClick="yzmpd()"/>
                        </p>
                        <p class="change_link">
                            已有账号 ? →
                            <a href="#tologin" class="to_register"> 去登录 </a>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</div>


<script charset="utf-8" src="../js/business//layui.js" ></script>
<script type="text/javascript" src="../js/business//layui.all.js"></script>
<script type="text/javascript" src="../js/business/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

    function HQdlyzm() {
        var returnStr = "",
            range = (6 ? Math.round(Math.random() * (6-6)) + 6 : 6),
            arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd',
                'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r',
                's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F',
                'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
                'U', 'V', 'W', 'X', 'Y', 'Z'];
        for(var i=0; i<range; i++){
            var index = Math.round(Math.random() * (arr.length-1));
            returnStr += arr[index];
        }
        yzm.value= returnStr;
    }

    function dlyyzm() {
        var dlyz = $("#yqdlyzm").val();
        var hqyz = $("#yzm").val();
        if (dlyz != hqyz){
            alert("验证码错误!!!");
        }
    }


    var returnStr = "";
    /**
     * 验证码判断
     */
    function yzmpd() {
        var hoqyzm = $("#yzmla").val();
        if (returnStr != hoqyzm){
            alert("验证码错误！！！");
        }
    }

    /**
     * 注册验证码
     * @type {number}
     */
        //设置验证码时间为60秒
    var waitTime = 60;
    document.getElementById("yzmanniu").onclick = function() {
        var phone = document.getElementById("phonesignup").value;
        //设置随机数
        //var returnStr = "",
        var range = (6 ? Math.round(Math.random() * (6-6)) + 6 : 6),
            arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
        for(var i=0; i<range; i++){
            var index = Math.round(Math.random() * (arr.length-1));
            returnStr += arr[index];
        }
        //yzm.value = returnStr; //赋值
        //yzmla.value= returnStr;  //merchant/yzm
        $.ajax({
            type: "get",
            url: "/merchant/yzm?phone=" + phone + "&yzmla=" + returnStr,
            error: function () {
                alert("验证码获取失败 ！！！！！！！");
            },success:function (data) {
                alert(data);
            }
        });
        time(this);
    }
    var yzif = $("#yamlo").val();
    function time(ele) {
        if (waitTime == 0) {
            ele.disabled=false;
            ele.innerHTML = "免费获取验证码";
            returnStr = "";
            if (yzif == returnStr){
                alert("验证码已过期请重新获取")
            }
            waitTime = 60;// 恢复计时
        } else {
            ele.disabled=true;
            ele.innerHTML = waitTime + "秒后可以重新发送";
            waitTime--;
            setTimeout(function() {
                time(ele)// 关键处-定时循环调用
            }, 1000)
        }
    };


    layui.use('upload', function() {
        var $ = layui.jquery,
            upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '/upload/',
            before: function(obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res) {
                //如果上传失败
                if(res.code > 0) {
                    return layer.msg('上传失败');
                }
                //上传成功
            },
        });

        $("#passwordsignup").focusout(function(){//鼠标移出时触发
            var str= $("#tupian").val(); //获取图片的值
            var arr=str.split(".")[1];  //获取图片名字的后缀名
            if (arr != "jpg"){
                // 获取输入框中填写的用户名和密码
                //check();//调用校验方法
                alert("只接受jpg形式的文件!!!");
            }
        });
        $("#passwordsignup").focusout(function(){//鼠标移出时触发
            var w1 = $("#passwordsignup").val();
            if (w1==""){
                alert("密码不能为空!!!!");
            } else if (w1.length < 6 | w1.length > 12){
                alert("密码必须是六位数到十二位数之间")
            } else {
                $("#passwordsignup_confirm").focusout(function(){//鼠标移出时触发
                    var w1 = $("#passwordsignup").val();
                    var w2 = $("#passwordsignup_confirm").val();
                    if (w1 != w2){
                        // 获取输入框中填写的用户名和密码
                        //check();//调用校验方法
                        alert("两次密码不一致，请重新输入!!!");
                    }
                });
            }
        });

        function check(){
            //采用ajax异步传值得方式，将获取的用户名和密码传到后端进行验证
            // 返回验证结果
            // 根据结果在页面上进行相应的提示
        }

    });
</script>
</body>
</html>